<template>
  <div>
    <el-upload class="upload-demo" action="" drag :auto-upload="false" :show-file-list="false"
      :on-change="changeUpload">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">点击上传</div>
      <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div>
    </el-upload>
    <div ref="imagePanel">
      <el-select v-model="fit" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div v-for="url in urls" class="demo-image__lazy">
      <el-image :key="url" :src="url" :fit="fit" lazy style="width: 300px; height: 150px">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
        <div slot="error" class="image-slot">
          <img id="img" style="width: 100%;" src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1629276178344.png"/>
        </div>
      </el-image>
      <el-image :key="url" :src="url" :fit="fit" lazy style="width: 150px; height: 300px">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
        <div slot="error" class="image-slot">
          <img id="img" style="width: 100%;" src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1629276178344.png"/>
        </div>
      </el-image>
      <el-image :key="url" :src="url" :fit="fit" lazy style="width: 200px; height: 200px">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
        <div slot="error" class="image-slot">
          <img id="img" style="width: 100%;" src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1629276178344.png"/>
        </div>
      </el-image>
    </div>
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <VueCropper ref="cropper" :img="option.img" :output-type="option.outputType" :info="true" :full="option.full"
            :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox"
            :original="option.original" :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox" :high="option.high"
            :info-true="option.infoTrue" :enlarge="option.enlarge"></VueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import PinchZoom from 'pinch-zoom-js';
  import {
    VueCropper
  } from 'vue-cropper'
  export default {
    data() {
      return {
        dialogVisible: false,
        // 裁剪组件的基础配置option
        option: {
          img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', // 裁剪图片的地址
          outputSize: 1, // 裁剪生成图片的质量
          full: false, // 输出原图比例截图 props名full
          autoCrop: true, //    是否默认生成截图框
          outputType: 'jpeg || png || webp', // 裁剪生成图片的格式
          canMove: true, // 上传图片是否可以移动
          canMoveBox: true, // 截图框能否拖动
          fixedBox: true, // 固定截图框大小 不允许改变
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          high: true, // 是否按照设备的dpr 输出等比例图片
          infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          enlarge: 1, // 图片根据截图框输出比例倍数
          maxImgSize: 2000 // 限制图片最大宽度和高度
        },
        picsList: [], //页面显示的数组
        // 防止重复提交
        loading: false,
        urls: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
          'dfdf'
        ],
        url: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        fit: 'fill',
        options: [{
          value: 'fill',
          label: 'fill'
        }, {
          value: 'contain',
          label: 'contain'
        }, {
          value: 'cover',
          label: 'cover'
        }, {
          value: 'none',
          label: 'none'
        }, {
          value: 'scale-down',
          label: 'scale-down'
        }]
      }
    },
    components: {
      VueCropper
    },
    mounted() {
      setTimeout(() => {

      }, 1000)
      this.$refs.imagePanel
    },
    methods: {
      // 上传按钮   限制图片大小
      changeUpload(file, fileList) {
        const isLt5M = file.size / 1024 / 1024 < 5
        if (!isLt5M) {
          this.$message.error('上传文件大小不能超过 5MB!')
          return false
        }
        this.fileinfo = file
        console.log(file)
        // 上传成功后将图片地址赋值给裁剪框显示图片
        this.$nextTick(() => {
          //this.option.img = file.url
          this.dialogVisible = true
        })
      },
      // 点击裁剪，这一步是可以拿到处理后的地址
      finish() {
        this.$refs.cropper.getCropBlob((data) => {
          console.log(data);
          var fileName = 'goods' + this.fileinfo.uid
          this.loading = true
        })
      }
    }
  }
</script>

<style scoped="true">
  .cropper-content .cropper {
    width: auto;
    height: 300px;
  }
</style>
